<template>
    <mgs-form-creator
        :items="items"
        :border="false"
        chain-prop
        style="width: 700px"
    >
        <!-- 自定义插槽测试 -->
        <el-upload
            slot="file"
            slot-scope="{ prop, formData }"
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
        >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <!-- 取值测试 -->
            <div v-show="false">{{ formData[prop] }}</div>
        </el-upload>
    </mgs-form-creator>
</template>

<script>
const formItems = [
    {
        slot: 'file',
        label: '文件上传测试',
        prop: 'file_path',
    },
    {
        label: '服务标识',
        prop: 'service_identify',
        childSpan: 12,
        items: [
            {
                label: '资源ID',
                prop: 'meta_resourceid',
                value: '',
            },
            {
                label: '资源名称',
                prop: 'meta_sresourcename',
                value: '全国TIN服务',
            },
            {
                label: '服务ID',
                prop: 'meta_serviceid',
                value: '',
            },
            {
                label: '服务名称',
                prop: 'meta_sname',
                value: '全国TIN服务',
            },
            {
                label: '场景名称',
                prop: 'meta_sscenename',
                value: '',
            },
            {
                label: '图层名称',
                prop: 'meta_slayername',
                value: '',
            },
            {
                label: '图层类型',
                prop: 'meta_slayertype',
                code: '',
                value: '',
            },
            {
                label: '数据集ID',
                prop: 'meta_sdatasetid',
                value: '',
            },
            {
                label: '数据集名称',
                prop: 'meta_sdatasetname',
                value: '',
            },
            {
                label: '数据集类型',
                prop: 'meta_sdatasettype',
                value: '',
            },
            {
                type: 'date-picker',
                label: '服务版本',
                prop: 'meta_sversion',
                value: '2021-08-30',
            },
            {
                label: '服务类型',
                prop: 'meta_stype',
                value: '三维场景服务',
            },
            {
                type: 'select',
                label: '接口类型',
                prop: 'meta_interface',
                options: [
                    { label: 'WMS 服务', value: 'WMS1' },
                    { label: 'WMTS 服务', value: 'WMTS2' },
                    { label: 'SMRESTMAP 服务', value: 'SMRESTMAP3' },
                    { label: 'SMTERRAIN 服务', value: 'SMTERRAIN4' },
                    { label: 'SMS3MLAYERS 服务', value: 'SMS3MLAYERS5' },
                ],
                // 异步加载
                loadOptions(callback) {
                    setTimeout(() => {
                        callback([
                            { label: 'WMS 服务', value: 'WMS1' },
                            { label: 'WMTS 服务', value: 'WMTS2' },
                            { label: 'SMRESTMAP 服务', value: 'SMRESTMAP3' },
                        ]);
                    }, 5000);
                },
                value: 'WMTS2',
            },
            {
                label: '摘要',
                prop: 'meta_sremark',
                value: '',
            },
            {
                label: '关键词',
                prop: 'meta_skeys',
                value: '',
            },
            {
                label: '描述',
                prop: 'meta_range',
                value: '',
            },
            {
                type: 'textarea',
                span: 24,
                label: '服务访问地址',
                prop: 'meta_surl',
                value: 'http://192.168.3.181:8083/geoesb/proxy/2a0e09628c9f46dca6f5d2d77cbc8e34',
            },
        ],
    },
    {
        label: '空间信息',
        prop: 'service_spatialinfo',
        items: [
            {
                label: '坐标系',
                prop: 'service_prjcoordsys',
                items: [
                    {
                        label: 'EPSGCode',
                        prop: 'prjcoordsyscode',
                        value: '',
                    },
                    {
                        label: '名称',
                        prop: 'prjcoordsysName',
                        value: '',
                    },
                ],
            },
            {
                label: '坐标范围',
                prop: 'service_boundingbox',
                items: [
                    {
                        label: '左',
                        prop: 'bounds_left',
                        value: '',
                    },
                    {
                        label: '上',
                        prop: 'bounds_top',
                        value: '',
                    },
                    {
                        label: '右',
                        prop: 'bounds_right',
                        value: '',
                    },
                    {
                        label: '下',
                        prop: 'bounds_bottom',
                        value: '',
                    },
                ],
            },
            {
                label: '中心点',
                prop: 'service_center',
                childSpan: 12,
                items: [
                    {
                        label: 'X',
                        prop: 'center_x',
                        value: '',
                    },
                    {
                        label: 'Y',
                        prop: 'center_y',
                        value: '',
                    },
                ],
            },
        ],
    },
    {
        label: '更新周期',
        prop: 'update_cyc',
        items: [
            {
                label: '生产时间',
                prop: 'production_sdate',
                value: '2021-08-30',
            },
            {
                label: '更新时间',
                prop: 'update_sdate',
                value: '',
            },
            {
                label: '更新周期',
                prop: 'update_cycle',
                value: '一年',
            },
        ],
    },
];

import MgsFormCreator from '@mgs/components-basic/mgs-form-creator';

export default {
    components: { MgsFormCreator },
    data() {
        return {
            items: formItems,
            imageUrl: '',
        };
    },
    methods: {
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
    },
};
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
